<template>
    <el-row :gutter="24" style="margin-top:16px" v-if="show">
        <el-col :md="3" :sm="6" style="text-align: center;line-height: 32px;">{{ name }}</el-col>
        <el-col :md="3" :sm="6">
            <el-switch v-model="data.http" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
        </el-col>
        <el-col :md="3" :sm="6">
            <el-switch v-model="data.hls" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
        </el-col>
        <el-col :md="3" :sm="6">
            <el-switch v-model="data.rtmp" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
        </el-col>
        <el-col :md="3" :sm="6">
            <el-switch v-model="data.rtsp.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
            <!-- <el-switch v-model="data.rtsp" inline-prompt active-text="ON" inactive-text="OFF"></el-switch> -->
        </el-col>
        <el-col :md="3" :sm="6">
            <el-switch v-model="data.udp.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
        </el-col>
        <el-col :md="3" :sm="6">
            <el-input v-model="data.udp.ip_port" :placeholder="$t('input_placeholder')"></el-input>
        </el-col>
        <el-col :md="1" :sm="2">
        </el-col>
        <el-col :md="2" :sm="4">
            <el-switch v-model="data.push.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
        </el-col>
    </el-row>
</template>
  
<script setup name="video-stream">
const props = defineProps(['name', 'data'])
let name = ref('')
let data = reactive({})
let show = ref(false)
watchEffect(() => {
    name.value = props.name
    data = props.data
    
    if(Object.keys(data).length){
        let { ip, port } = data.udp
        data.udp.ip_port = `${ip}:${port}+`
        show.value = true
    }
    
})
onUnmounted(() => {

});

</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  